<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <script>
        //创建节点的方法
        //createELement("tagName")创建一个节点
        //A.appendChild(B),把B添加到A节点后
        //insertBefore(A,B) 把A插入到B节点之后
        //cloneNode(deep)//deep布尔值，true
        //
    </script>
</head>
<body>
    <p>选择你喜欢的物品
        <input type="radio" name="mouse" onclick="mouse()">罗技鼠标
        <input type="radio" name="mouse" onclick="mouse()">雷蛇鼠标
    </p>
    <div></div>
    <script>
        function mouse(){
            let ele = doucment.getElementsByTagName("input");
            let a =doucment.getElementsByTagName("div")[0];
            
            if (ele[0].checked){
                let img =doucment.createElement("img");
                img.setAttribute("src","./img/gj.jpg");
                img.setAttribute("alt","雷蛇鼠标")
                 a.appendChild(img);
                 }
                 else if (ele[0].checked){
                let img =doucment.createElement("img");
                img.setAttribute("src","./img/ls.jpg");
                img.setAttribute("alt","雷蛇鼠标")
                img.setAttribute("onclick","copy()")
                 a.appendChild(img);
            }
        }
        function copy(){
            let ele = doucment.getElementsByTagName("div")[1];
            let copy =a.lastElementChild.cloneNode(true);
            a.insertBefore(copy,a.fristchild)
            

        }
    </script>
</body>
<html>